<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<!-- 通讯录 -->
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit"/>
	<meta name="force-rendering" content="webkit"/>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="名榜,wangid">
	<title>通讯录</title>

	<!-- CSS -->
	<link rel="stylesheet" href="css/style.css">
	 <link rel="stylesheet" href="css/children.css">

	<!-- 在线图标库 地址：http://fontawesome.dashgame.com/-->
	<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

	<!-- layui css -->
	<link rel="stylesheet" href="layui/css/layui.css" media="all">
	<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> 
	<!-- layui js -->
	<script src="layui/layui.js"></script>
	<style type="text/css">
			.layui-table thead th {
				/*border-color:black;*/
				
				color: black;
			}
			
			.layui-table tbody td {
				/*border-color:black;*/
				
				color: black;
			}
			
			.layui-table tbody tr:hover {
				background-color: transparent;
			}
			.container{
				background: rgba(255, 255, 255, 0.2);
				opacity: 0.8;
			}
		</style>
</head>

<body>
<div class="bg_box" style="background: url(images/mor_bj2.jpg) no-repeat center center; background-size: cover;"></div>
		<div class="container" style="background-color: transparent;">
<div class="wangid_conbox" style="background-color: transparent;">
	<!-- 当前位置 -->
	<div class="zy_weizhi bord_b">
		<i class="fa fa-home fa-3x"></i>
		<a href="sta.do">首页</a>
		<a>通讯录</a>
		<span>通讯录信息</span>
	</div>
	<!-- 筛选 --> 
	<div class="shuaix">
		<!-- <div class="left" style="margin-right:10px;"> 
			<select>   
				<option value="技术部">技术部</option>   
				<option value="客服部">客服部</option>   
				<option value="人事部">人事部</option>   
				<option value="营销部">营销部</option>    
			</select>
		</div>  -->
		<!-- <div class="right">
			<input type="text" placeholder="请输入关键词查询">
			<a href="#">查询</a>
		</div> -->
		<!-- 模糊查询的页面控件 -->
  	<div class="demoTable">
		<br /> 请输入关键字：
		<div class="layui-inline">
			<input class="layui-input" id="searchLike"
				autocomplete="off">
		</div>
		<button class="layui-btn" id="btnSearch" data-type="reload">搜索</button>
	</div>
	
    <!-- 模糊查询的页面控件 结束-->
		
	</div>
	 <!-- 这里id= demo 是给 elem用的,关联js代码 展示数据的-->
<table id="demo" lay-filter="test"></table>
 <!-- 2 导入layui.js文件-->
<script src="layui/layui.js"></script>
<!-- <script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo' //element 元素
    ,height: 312  //高度
    //,url: 'https://www.layui.com/demo/table/user/' //数据接口 ,目前学过的知识中，这里就是一个servlet的访问地址
    ,url: 'sta.do' //数据接口 ,目前学过的知识中，这里就是一个servlet的访问地址
    ,page: true //开启分页
    ,cols: [[ //表头 ,"列"设置
       {type: 'checkbox', fixed: 'left'}
      ,{field: 'userName', title: '姓名', align:'center',width:160}
      ,{field: 'phone', title: '电话号码', align:'center', minWidth:170}
      ,{field: 'deptName', title: '部门', align:'center',minWidth:260}
      ,{field: 'deptManName', title: '部长姓名', align:'center',minWidth:130} 
      ,{field: 'deptManPhone', title: '部长电话', align:'center',width:130}
    ]]
  });
  
});
</script> -->
	 <table class="layui-table" lay-filter="mylist" lay-size="lg">
		<thead>
			<tr>
				<!-- <th lay-data="{type:'checkbox',fixed:'left'}"></th> -->
				<th>姓名</th>
				<th>联系方式</th>
				<th>所属部门</th>
				<th>部长姓名</th>
				<th>部长联系电话</th> 
			</tr> 
		</thead>
		<tbody>
		    <c:if test="${requestScope.pageData.data!=null}">
		    <c:forEach var="address" items="${requestScope.pageData.data}">
			<tr>
				<!-- <td></td> -->
				<td>${address.userName}</td>
				<td>${address.phone}</td>
				<td>${address.deptName}</td>
				<td>${address.deptManName}</td>
				<td>${address.deptManPhone}</td>              
			</tr>
			</c:forEach> 
			</c:if>
		</tbody>  
	</table> 
	<div id='pageDiv'></div>
</div>
</div> 
<!-- <script type="text/javascript">
	//静态表格
    layui.use('table',function(){
    	var table = layui.table;
		//转换静态表格
		table.init('mylist', {
		  height: 'full-130' //高度最大化减去差值,也可以自己设置高度值：如 height:300
		  ,count: 50 //数据总数 服务端获得
		  ,limit: 10 //每页显示条数 注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
		  ,page:true //开启分页
		  ,toolbar: '#toolbarDemo'//工具栏
		  ,defaultToolbar:['filter', 'exports']
		  ,limits:[10, 20, 30, 40, 50]//分页显示每页条目下拉选择
		  ,cellMinWidth: 60//定义全局最小单元格宽度，其余自动分配宽度
		}); 
    });
		</script> -->
<!-- <script type="text/javascript">
	//静态表格
    layui.use('table',function(){
    	var table = layui.table;
		//转换静态表格
		table.init('mylist', {
		  height: 'full-130' //高度最大化减去差值,也可以自己设置高度值：如 height:300
		  ,count: 50 //数据总数 服务端获得
		  ,limit: 10 //每页显示条数 注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
		  ,page:true //开启分页
		  ,toolbar: '#toolbarDemo'//工具栏
		  ,defaultToolbar:['filter', 'exports']
		  ,limits:[10, 20, 30, 40, 50]//分页显示每页条目下拉选择
		  ,cellMinWidth: 60//定义全局最小单元格宽度，其余自动分配宽度
		}); 
		//监听行工具事件
		/* table.on('tool(mylist)', function(obj){ //注：tool 是工具条事件名，mylist 是 table 原始容器的属性 lay-filter="对应的值"
			var data = obj.data //获得当前行数据
			,layEvent = obj.event; //获得 lay-event 对应的值
			if(layEvent === 'del'){
			    layer.confirm('真的删除行么', function(index){
				    obj.del(); //删除对应行（tr）的DOM结构
				    layer.close(index);
				    //向服务端发送删除指令
			    });
			} else if(layEvent === 'edit'){
			    layer.msg('修改操作');
			}
		});  */
		 //监听头工具栏事件
		 /* table.on('toolbar(mylist)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据 
                switch(obj.event){  
                case 'getCheckLength':
                    if(data.length === 0){
                    layer.msg('请选择一行');
                    } else {
                    layer.msg('删除');
                    }
                break;
                };
            });  */
	}); 
	/*   //  iframe层  详情信息
    function YuanG_IMG(){
        //iframe层 
        layer.open({
            type: 2,//层类型
            title: "简历图片",//标题
            closeBtn: 1, //不显示关闭按钮
            shade: [0.3],//遮罩
            skin: 'demo_class_color',//iframe皮肤
            shadeClose:Boolean,//点击遮罩关闭
            area: ['800px', '460px'],
            // offset: 'rb', //右下角弹出
            // time: 2000, //2秒后自动关闭
            anim: 5,//动画
            content: ['YuanGong_jl.html', 'no'], //iframe的url，no代表不显示滚动条 
        }); 
        
    } */
</script>  -->
<script>

/* layui.use('table',function(){
	var table = layui.table;
	//转换静态表格
	table.init('mylist', {
	  height: 'full-130' //高度最大化减去差值,也可以自己设置高度值：如 height:300
	  ,count: 50 //数据总数 服务端获得
	  ,limit: 10 //每页显示条数 注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
	  ,page:true //开启分页
	  ,toolbar: '#toolbarDemo'//工具栏
	  ,defaultToolbar:['filter', 'exports']
	  ,limits:[10, 20, 30, 40, 50]//分页显示每页条目下拉选择
	  ,cellMinWidth: 60//定义全局最小单元格宽度，其余自动分配宽度
	}); 
}); */

layui.use(['laypage', 'layer'], function(){
	
  //定义两个变量 laypage  layer
  var laypage = layui.laypage
  ,layer = layui.layer;
  
  
  //完整功能
  laypage.render({
    elem: 'pageDiv'  //指向存放分页的容器,pageDiv是一个层的div
    ,count: '${requestScope.pageData.totalCount} '  //数据总数。一般通过服务端得到 
    ,curr:'${requestScope.pageData.page}'
    ,page:true
    ,limit:'${requestScope.pageData.pageSize}'
    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] //自定义排版
    ,jump: function(obj,first){  //切换分页的回调
      console.log(obj) ;//obj（当前分页的所有选项值）
      
      console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
      console.log(obj.limit); //得到每页显示的条数
      
      if(!first)
    	  {
    	  //跳页的具体请求 js代码
    	  location.href="sta.do?op=adb&page="+obj.curr+"&pageSize="+obj.limit+"&strLike="+$("#searchLike").val();
    	  }
    }

  });
  
  
});

$(function(){
	  
	  $("#btnSearch").click(function(){		  
		  location.href="sta.do?op=adb&strLike="+$("#searchLike").val()+"&page=1&pageSize="+${requestScope.pageData.pageSize==null?10:requestScope.pageData.pageSize};
	  });
	  
	  
});
</script>



</body>

</html>
